<template>
   <div>
      <my-table :data="list">
         <my-table-column label="生日" prop="birthday"></my-table-column>
         <my-table-column label="姓名" prop="name"></my-table-column>
         <my-table-column label="性别" prop="gender"></my-table-column>
         <my-table-column label="成绩" prop="score"></my-table-column>
      </my-table>

      <hr>
       <my-table :data="list">
         <my-table-column label="生日" prop="birthday">
            <template v-slot="{row}">
              <i class="iconfont icon-shijian"></i>
              {{row.birthday}}
            </template>
         </my-table-column>
         <my-table-column label="姓名" prop="name">
            <template v-slot="{row}">
            
               <div class="info">
                   {{row.name}}
               </div>
            </template>
         </my-table-column>
         <my-table-column label="性别" prop="gender">
           <template v-slot="{row}">
              <span>{{row.gender===1?"男":"女"}}</span>
           </template>
         </my-table-column>
         <my-table-column label="成绩" prop="score"></my-table-column>
      </my-table>
   </div>
</template>

<script>
export default {
  data(){
    return{
      list:[
        {birthday:'2016-05-02',name:'王小虎',gender:1,score:80},
        {birthday:'1990-04-02',name:'汤小虎',gender:2,score:50},
        {birthday:'1987-03-02',name:'李晓明',gender:1,score:70}
      ]
    }
  }
}
</script>

<style>
  .info{
    background-color: red;
    padding: 1px;
    margin: 5px;
    color: white;
    border-radius: 5px;
  }
</style>